<template>
	<view class="index">
		<!-- header -->
		<header>
			<div class="top" :style="'padding-top'+titleHeight+'px'">
				云南省第一人民医院
			</div>
			<div class="img">
				<image src="https://diancan-1252107261.cos.ap-chengdu.myqcloud.com/tianqi/tianqi-top.png" mode="">
				</image>
			</div>
		</header>
		<div class="address" v-if="weather.length > 0">
			<p>
				<image :src="weather[0].address_icon"></image>北京市 北京市 海淀区
			</p>
			<p>
				<image :src="weather[0].tigan_icon"></image>体感温度7°
			</p>
			<p>
				<image :src="weather[0].ziwxian_icon"></image>紫外线强度2W/m
			</p>

		</div>
		<!-- nav -->
		<view class="nav">
			<view class="nav-item" v-for="item,index in navList.vaccine" :key="item.id">
				
				<view class="nav-item-img" @click="naventer(index)">
					<image class="image" :src="item.image" mode=""></image>
					<view>
						{{item.title}}
					</view>
				</view>
			</view>
		</view>

		<!-- 挂号和体检 -->
		<view class="re-me-ex">
			<view class="re-me-ex-view" v-for="(item, index) in pyhdata" :key="index" @click="regMedex(index)">
				<text class="re-me-ex-title">{{item.title}}</text>
				<text class="re-me-ex-lable">{{item.describe}}</text>
				<image mode="widthFix" :src="item.image"></image>
			</view>
		</view>
		<!-- 疫情数据 -->
		<!--  <view class="online-title">
	    <view>疫情数据</view>
	    <view class="epidemic-time"><text>截止{{mtime}}</text></view>
	  </view>
	  <view class="epidemic-view sele-test-back">
	    <view v-for="(item,index) in epidemicData" :key="index">
	      <text>{{item.title}}</text>
	      <text class="num-of-people" :style="{color:item.color}">{{item.numOfpeople}}</text>
	    </view>
	  </view> -->

<!-- 热门挂号 -->
  <view class="online-title">
    <view>热门挂号</view>
    <view class="online-More">
      <text @click="regMedex(0)">查看更多</text>
      <image src="/static/other/gengduo.svg"></image>
    </view>
  </view>
  <view class="online-reg">
    <view v-for="(item, index) in popular" :key="index" :style=" 'background-color:' + item.background "
    @click="regRoute(item.dep_id)"
    >
      <text>{{item.title}}</text>
      <image mode="aspectFit" :src="item.image"></image>
    </view>
  </view>


	</view>





</template>

<script>
	import {
		getlist,
		weather


	} from '../../utils/api.js'
	export default {
		data() {
			return {
				titleHeight: 0, //安全胶囊
				navList: [],
				weather: [],
				pyhdata: [],
				popular:[]
			};


		},
		methods: {
			// regMedex
			naventer(index){
				 uni.navigateTo({url:'/pages/order/order'})
			},
			// 点击挂号 体检
			regMedex() {
			 uni.switchTab({url:'/pages/registered/registered'})
			},
			//地表
			openTargeting() {},
			getHeight() {
				let res = wx.getMenuButtonBoundingClientRect()
				this.height = res.top
			}

		},
		onLoad() {
			// render
			getlist().then(res => {
				console.log(res, 63);
				this.navList = res.data.data[0]
				this.pyhdata = res.data.data[1].reserve
				this.popular=res.data.data[2].popular
			});
			// 地标
			weather().then(res => {
				this.weather = res.data.data

				console.log(this.weather);
			})
			// getepid({}).then(res=>{
			// 	console.log(res,110);
			// })
			this.getHeight()

		}


	}
</script>
<style lang="scss">
	.top {
		font-weight: 700rpx;
		line-height: 80px;
		margin-left: 40rpx;
		font-size: 17px;
		letter-spacing: 4rpx;
		position: fixed;
		top: 0;
	}

	.index {
		width: 750rpx;
		height: 1700rpx;
		margin: 0;
		padding: 0;
		box-sizing: border-box;


		.img {
			width: 100%;

			image {
				width: 100%;
				height: 700rpx;
			}

		}
	}

	.address {
		position: absolute;
		top: 180rpx;
		left: 20rpx;
		letter-spacing: 6rpx;
		color: #fff;

		p {

			margin-top: 20rpx;
		}

		image {
			margin-right: 8rpx;
			width: 30rpx;
			height: 30rpx;


		}
	}

	.nav {
		width: 100%;
		height: 100rpx;
		color: #000;
		display: flex;
		padding-top: 10rpx;
		text-align: center;
		justify-content: space-around;

		.nav-item {
			.nav-item-img {
				width: 100rpx;
				height: 50rpx;
				font-size: 25rpx;

				image {
					width: 70%;
					height: 100%;

				}
			}
		}
	}
	/* 在线挂号 */
	.online-title{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 40rpx 10rpx 10rpx 10rpx;
	  font-weight: bold;
	}
	.online-title view:nth-child(1){
	  font-size: 35rpx;
	}
	.online-More{
	  display: flex;
	  align-items: center;
	}
	.online-More image{
	  width: 40rpx;
	  height: 40rpx;
	  display: block;
	  margin-left: 10rpx;
	}
	.online-reg{
	  display: flex;
	  justify-content: space-around;
	  flex-wrap: wrap;
		margin: 10rpx 0;
	}
	.online-reg image{
	  width: 50rpx;
	  height: 70rpx;
	}
	
	.online-reg view{
	  width: calc(33% - 30rpx*2);
		margin: 10rpx;
	  padding: 20rpx;
	  display: flex;
	  align-items: center;
	  font-size: 28rpx;
	  justify-content: space-between;
	  border-radius: 10rpx;
	}

	.re-me-ex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;
	}

	.re-me-ex-view {
		position: relative;
		height: 200rpx;
		width: 48%;
	}

	.re-me-ex-view image {
		width: 150rpx;
		display: block;
		position: absolute;
		bottom: 0;
		right: 20rpx;
	}

	.re-me-ex view:nth-child(1) text:nth-child(1) {
		color: #0042ff;
	}

	.re-me-ex view:nth-child(2) text:nth-child(1) {
		color: #dc6200;
	}

	.re-me-ex view:nth-child(1) {
		background-image: linear-gradient(to right, #d7dfff 10%, #5a9fff 100%);
		border-radius: 20rpx;
	}

	.re-me-ex view:nth-child(2) {
		background-image: linear-gradient(to right, #ffdbb4 10%, #ffc56b 100%);
		border-radius: 20rpx;
	}

	.re-me-ex-title {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		font-size: 40rpx;
	}

	.re-me-ex-lable {
		font-size: 30rpx;
		color: #ffffff;
		position: absolute;
		top: 90rpx;
		left: 20rpx;
	}
</style>
